WinRT Edition Basic Library > ListBox for WinRT > C1ListBox Quick Start > Step 1 of 3: Creating an Application with a C1ListBox Control |
In this step, you'll create a WinRT application in Visual Studio using ListBox for WinRT.
Complete the following steps:
Markup Copy Code xmlns:c1="using:C1.Xaml" xmlns:c1tile="using:C1.Xaml.Tile"
This adds references to the C1.Xaml and C1.Xaml.Tile assemblies to the project.
Markup Copy Code <StackPanel x:Name="loading" VerticalAlignment="Center"> <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/> <ProgressBar IsIndeterminate="True" Width="200" Height="4"/> </StackPanel>
The TextBlock and ProgressBar will indicate that the C1ListBox is loading.
Markup Copy Code <Xaml:C1ListBox x:Name="listBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False"></Xaml:C1ListBox>
This gives the control a name and customizes the binding, background, visibility, size, and refreshing ability of the control.
Markup Copy Code <Xaml:C1ListBox.PreviewItemTemplate> <DataTemplate> <Grid Background="Gray"> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/> </Grid> </DataTemplate> </Xaml:C1ListBox.PreviewItemTemplate> <Xaml:C1ListBox.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding Content}" Stretch="UniformToFill"/> <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/> </Grid> </DataTemplate> </Xaml:C1ListBox.ItemTemplate>
This markup adds data templates for the C1ListBox control's content. Note that you'll complete binding the control in code.
What You've Accomplished
You've successfully created a WinRT style application containing a C1ListBox control. In the next step, Step 2 of 3: Adding Data to the ListBox, you will add the data for C1ListBox.